<template>
  <div class="patient-reported-left-audit-trail">
    <div class="search-box">
      <div>
        <span>访视:</span>
        <div>
          <el-select :size="size" v-model="valueVisit" clearable placeholder="请选择">
            <el-option v-for="item in subjectVisit" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <span>表名称:</span>
        <div>
          <el-select :size="size" v-model="valueTable" clearable placeholder="请选择">
            <el-option v-for="item in subjectTables" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <el-button :size="size" icon="el-icon-search" @click="onSearch"></el-button>
      </div>
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        :size="size"
        style="width: 100%"
        stripe
        :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
      >
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column prop="subjectVisitName" label="访视名称" />
        <el-table-column prop="subjectTableName" label="表名称" />
        <el-table-column prop="operateType" label="操作类型" />
        <el-table-column prop="operateReason" label="原因" />
        <el-table-column prop="databaseVersion" label="eCRF版本号" />
        <el-table-column prop="databaseNum" label="失效版本号" />
        <el-table-column prop="handleName" label="操作人" />
        <el-table-column prop="role" label="角色" />
        <el-table-column prop="createTime" label="时间" />
      </el-table>
    </div>
    <el-row style="margin-top: 12px" type="flex" justify="end">
      <el-pagination
        layout="total,sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParams.pageNo"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageParams.pageSize"
        :total="pageParams.total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      total: 20,
      size: 'mini',
      optionsVisit: [],
      valueVisit: '',
      optionsTable: [],
      valueTable: '',
      tableData: [],
      pageParams: {
        pageNo: 1,
        pageSize: 10,
        total: null,
      },
    }
  },
  props: {
    subjectVisit: {
      type: Array,
    },
    subjectTables: {
      type: Array,
    },
    dialogAuditTrailVisible: {
      type: Boolean,
    },
  },
  components: {},
  computed: {
    ...mapState({
      subjectInfo: state => state.treatment.subjectInfo,
    }),
  },
  watch: {
    dialogAuditTrailVisible: {
      handler: function (val) {
        if (val) {
          this.findAuditTrailPage()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    ...mapActions('eCRFDetail', ['getHisPage']),
    onSearch() {
      this.findAuditTrailPage()
    },
    // 分页
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.findAuditTrailPage()
    },
    handleCurrentChange(val) {
      this.pageParams.pageNo = val
      this.findAuditTrailPage()
    },
    findAuditTrailPage() {
      const { id } = this.subjectInfo
      const data = {
        subjectId: id,
        subjectVisitName: this.valueVisit,
        subjectTableName: this.valueTable,
        ...this.pageParams,
      }
      this.getHisPage({ data })
        .then(res => {
          const { code, data, message } = res
          if (code == 200) {
            const { records, total } = data
            this.pageParams.total = total
            this.tableData = records
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
        .finally(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.patient-reported-left-audit-trail {
  > .search-box {
    display: flex;
    margin-bottom: 1rem;
    > div {
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      color: #303133;
      margin-right: 0.6rem;
      > span {
        margin-right: 0.6rem;
      }
    }
  }
  > .table-box {
    margin-bottom: 1rem;
    /deep/ .el-table__body-wrapper {
      height: 37vh;
      overflow: auto;
    }
  }
  > .footer {
    height: 2vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
